
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-dashboard"></i> 生产进度跟踪 - 大屏仪表板</h3>
    </div>
    <div class="panel-body">
        <!-- 筛选条件 -->
        <div class="filter-section">
            <h4><i class="fa fa-filter"></i> 筛选条件</h4>
            <form class="form-inline" method="get">
                <div class="form-group">
                    <label>订单：</label>
                    <select name="order_id" class="form-control" style="width: 150px;">
                        <option value="">全部订单</option>
                        {foreach $orderList as $id => $name}
                        <option value="{$id}" {if $filters.order_id == $id}selected{/if}>{$name}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group">
                    <label>生产计划：</label>
                    <select name="plan_id" class="form-control" style="width: 150px;">
                        <option value="">全部计划</option>
                        {foreach $planList as $id => $name}
                        <option value="{$id}" {if $filters.plan_id == $id}selected{/if}>{$name}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group">
                    <label>工序：</label>
                    <select name="process_id" class="form-control" style="width: 120px;">
                        <option value="">全部工序</option>
                        {foreach $processList as $id => $name}
                        <option value="{$id}" {if $filters.process_id == $id}selected{/if}>{$name}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group">
                    <label>员工：</label>
                    <select name="user_id" class="form-control" style="width: 120px;">
                        <option value="">全部员工</option>
                        {foreach $userList as $id => $name}
                        <option value="{$id}" {if $filters.user_id == $id}selected{/if}>{$name}</option>
                        {/foreach}
                    </select>
                </div>
                <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 筛选</button>
                <a href="{:url('scanwork/production_plan/progress')}" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</a>
            </form>
        </div>

        <!-- 整体统计概览 - 大屏卡片 -->
        <div class="dashboard-grid">
            <div class="stats-card blue">
                <div class="row">
                    <div class="col-md-8">
                        <h3><i class="fa fa-file-text"></i> 总订单数</h3>
                        <h1 style="font-size: 3em; margin: 0;">{$overallStats.total_orders}</h1>
                        <p>活跃订单数量</p>
                    </div>
                    <div class="col-md-4 text-right">
                        <i class="fa fa-file-text" style="font-size: 4em; opacity: 0.3;"></i>
                    </div>
                </div>
            </div>
            
            <div class="stats-card green">
                <div class="row">
                    <div class="col-md-8">
                        <h3><i class="fa fa-calendar"></i> 总计划数</h3>
                        <h1 style="font-size: 3em; margin: 0;">{$overallStats.total_plans}</h1>
                        <p>生产计划总数</p>
                    </div>
                    <div class="col-md-4 text-right">
                        <i class="fa fa-calendar" style="font-size: 4em; opacity: 0.3;"></i>
                    </div>
                </div>
            </div>
            
            <div class="stats-card orange">
                <div class="row">
                    <div class="col-md-8">
                        <h3><i class="fa fa-tasks"></i> 小工单数</h3>
                        <h1 style="font-size: 3em; margin: 0;">{$overallStats.total_allocations}</h1>
                        <p>分配任务总数</p>
                    </div>
                    <div class="col-md-4 text-right">
                        <i class="fa fa-tasks" style="font-size: 4em; opacity: 0.3;"></i>
                    </div>
                </div>
            </div>
            
            <div class="stats-card purple">
                <div class="row">
                    <div class="col-md-8">
                        <h3><i class="fa fa-cubes"></i> 总数量</h3>
                        <h1 style="font-size: 3em; margin: 0;">{$overallStats.total_quantity}</h1>
                        <p>计划生产总量</p>
                    </div>
                    <div class="col-md-4 text-right">
                        <i class="fa fa-cubes" style="font-size: 4em; opacity: 0.3;"></i>
                    </div>
                </div>
            </div>
            
            <div class="stats-card red">
                <div class="row">
                    <div class="col-md-8">
                        <h3><i class="fa fa-check-circle"></i> 已完成</h3>
                        <h1 style="font-size: 3em; margin: 0;">{$overallStats.completed_quantity}</h1>
                        <p>实际完成数量</p>
                    </div>
                    <div class="col-md-4 text-right">
                        <i class="fa fa-check-circle" style="font-size: 4em; opacity: 0.3;"></i>
                    </div>
                </div>
            </div>
            
            <div class="stats-card aqua">
                <div class="row">
                    <div class="col-md-8">
                        <h3><i class="fa fa-percent"></i> 完成率</h3>
                        <h1 style="font-size: 3em; margin: 0;">{$overallStats.overall_completion_rate}%</h1>
                        <p>整体完成进度</p>
                    </div>
                    <div class="col-md-4 text-right">
                        <div class="progress-ring">
                            <div id="completionChart" style="width: 120px; height: 120px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="dashboard-grid">
            <!-- 整体进度柱状图 -->
            <div class="chart-container large-chart">
                <h4><i class="fa fa-bar-chart"></i> 整体生产进度</h4>
                <div id="overallProgressChart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 工序完成率饼图 -->
            <div class="chart-container">
                <h4><i class="fa fa-pie-chart"></i> 工序完成率分布</h4>
                <div id="processPieChart" style="width: 100%; height: 300px;"></div>
            </div>
        </div>

        <!-- 员工效率图表 -->
        <div class="dashboard-grid">
            <!-- 员工完成率排行 -->
            <div class="chart-container large-chart">
                <h4><i class="fa fa-users"></i> 员工完成率排行</h4>
                <div id="employeeRankingChart" style="width: 100%; height: 300px;"></div>
            </div>
            
            <!-- 订单进度对比 -->
            <div class="chart-container">
                <h4><i class="fa fa-line-chart"></i> 订单进度对比</h4>
                <div id="orderProgressChart" style="width: 100%; height: 300px;"></div>
            </div>
        </div>

        <!-- 多维度统计标签页 -->
        <div class="chart-container">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab-orders" data-toggle="tab"><i class="fa fa-file-text"></i> 按订单统计</a></li>
                    <li><a href="#tab-products" data-toggle="tab"><i class="fa fa-cube"></i> 按产品统计</a></li>
                    <li><a href="#tab-processes" data-toggle="tab"><i class="fa fa-cogs"></i> 按工序统计</a></li>
                    <li><a href="#tab-employees" data-toggle="tab"><i class="fa fa-users"></i> 按员工统计</a></li>
                </ul>
                <div class="tab-content">
                    <!-- 按订单统计 -->
                    <div class="tab-pane active" id="tab-orders">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>订单名称</th>
                                        <th>订单编号</th>
                                        <th>计划数</th>
                                        <th>总数量</th>
                                        <th>已完成</th>
                                        <th>完成率</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $orderStats as $order}
                                    <tr>
                                        <td>{$order.order_name}</td>
                                        <td>{$order.order_no}</td>
                                        <td><span class="badge bg-blue">{$order.total_plans}</span></td>
                                        <td>{$order.total_quantity}</td>
                                        <td>{$order.completed_quantity}</td>
                                        <td>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar bg-green" style="width: {$order.completion_rate}%"></div>
                                            </div>
                                            <span class="text-muted">{$order.completion_rate}%</span>
                                        </td>
                                <td>
                                    <button class="btn btn-xs btn-info" data-action="showOrderDetails" data-order-id="{$order.order_id}">
                                        <i class="fa fa-eye"></i> 查看详情
                                    </button>
                                </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 按产品统计 -->
                    <div class="tab-pane" id="tab-products">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>产品名称</th>
                                        <th>计划数</th>
                                        <th>总数量</th>
                                        <th>已完成</th>
                                        <th>完成率</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $productStats as $product}
                                    <tr>
                                        <td>
                                            <strong>{$product.product_name}</strong>
                                        </td>
                                        <td>{$product.total_plans}</td>
                                        <td>{$product.total_quantity}</td>
                                        <td>{$product.completed_quantity}</td>
                                        <td>
                                            <div class="progress progress-sm">
                                                <div class="progress-bar bg-blue" style="width: {$product.completion_rate}%"></div>
                                            </div>
                                            <span class="text-muted">{$product.completion_rate}%</span>
                                        </td>
                                <td>
                                    <button class="btn btn-xs btn-info" data-action="showProductDetails" data-product-id="{$product.product_id}">
                                        <i class="fa fa-eye"></i> 查看详情
                                    </button>
                                </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 按工序统计 -->
                    <div class="tab-pane" id="tab-processes">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>工序名称</th>
                                        <th>小工单数</th>
                                        <th>总数量</th>
                                        <th>已完成</th>
                                        <th>完成率</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $processStats as $process}
                                    <tr>
                                        <td>{$process.process_name}</td>
                                        <td><span class="badge bg-yellow">{$process.total_allocations}</span></td>
                                        <td>{$process.total_quantity}</td>
                                        <td>{$process.completed_quantity}</td>
                                        <td>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar bg-green" style="width: {$process.completion_rate}%"></div>
                                            </div>
                                            <span class="text-muted">{$process.completion_rate}%</span>
                                        </td>
                                <td>
                                    <button class="btn btn-xs btn-info" data-action="showProcessDetails" data-process-name="{$process.process_name}">
                                        <i class="fa fa-eye"></i> 查看详情
                                    </button>
                                </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 按员工统计 -->
                    <div class="tab-pane" id="tab-employees">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>员工姓名</th>
                                        <th>小工单数</th>
                                        <th>总数量</th>
                                        <th>已完成</th>
                                        <th>完成率</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $employeeStats as $employee}
                                    <tr>
                                        <td>{$employee.user_name}</td>
                                        <td><span class="badge bg-purple">{$employee.total_allocations}</span></td>
                                        <td>{$employee.total_quantity}</td>
                                        <td>{$employee.completed_quantity}</td>
                                        <td>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar bg-green" style="width: {$employee.completion_rate}%"></div>
                                            </div>
                                            <span class="text-muted">{$employee.completion_rate}%</span>
                                        </td>
                                <td>
                                    <button class="btn btn-xs btn-info" data-action="showEmployeeDetails" data-user-id="{$employee.user_id}">
                                        <i class="fa fa-eye"></i> 查看详情
                                    </button>
                                </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="detailModalTitle">详情</h4>
            </div>
            <div class="modal-body" id="detailModalBody">
                <!-- 动态加载内容 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 隐藏的数据元素，用于JavaScript获取数据 -->
<div id="completion-rate" data-rate="{$overallStats.overall_completion_rate|default=0}" style="display: none;"></div>
<div id="total-quantity" data-value="{$overallStats.total_quantity|default=0}" style="display: none;"></div>
<div id="completed-quantity" data-value="{$overallStats.completed_quantity|default=0}" style="display: none;"></div>

{foreach $processStats as $process}
<div class="process-data" data-name="{$process.process_name}" data-rate="{$process.completion_rate|default=0}" style="display: none;"></div>
{/foreach}

{foreach $employeeStats as $employee}
<div class="employee-data" data-name="{$employee.user_name}" data-rate="{$employee.completion_rate|default=0}" style="display: none;"></div>
{/foreach}

{foreach $orderStats as $order}
<div class="order-data" data-name="{$order.order_name}" data-rate="{$order.completion_rate|default=0}" style="display: none;"></div>
{/foreach}

<!-- Product Data -->
{foreach $productStats as $product}
<div class="product-data" data-id="{$product.product_id}" data-name="{$product.product_name}" data-rate="{$product.completion_rate|default=0}" style="display: none;"></div>
{/foreach}

<style>
/* 修复CSS过时属性警告 - 使用现代标准 */
@media (forced-colors: active) {
    .stats-card {
        border: 2px solid;
    }
}

/* 兼容旧版IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    * {
        -ms-high-contrast: none !important;
    }
}

/* 使用现代CSS替代 */
@media (forced-colors: active) {
    .stats-card {
        border: 2px solid;
    }
}

.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stats-card.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stats-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.stats-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stats-card.purple { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stats-card.red { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.stats-card.aqua { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }

.chart-container {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.chart-container:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.progress-ring {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.filter-section {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.large-chart {
    grid-column: span 2;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .large-chart {
        grid-column: span 1;
    }
    
    .stats-card h1 {
        font-size: 2em !important;
    }
    
    .stats-card h3 {
        font-size: 1.2em !important;
    }
}

/* 加载动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stats-card {
    animation: fadeInUp 0.6s ease-out;
}

.chart-container {
    animation: fadeInUp 0.8s ease-out;
}
</style>
